/* MARK: fonts */
@font-face {
  font-family: "Euripides";
  src: url("../type/Euripides.woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Euripides";
  src: url("../type/Euripides.woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Smokum";
  src: url("../type/Smokum-Regular.ttf");
  font-weight: 700;
  font-style: normal;
}

/* MARK: kleurtjes en zo */

html {
  color-scheme: light dark;

  /* Met de light-dark() functie definieer je in één keer een lichte en donkere waarde voor je custom properties. */
  --background: light-dark(#6c7bc6, #463b88);
  --background-2: light-dark(#bd4839, #a81916);
  --color: light-dark(#fff990, whitesmoke);
  --accent-color: deeppink;

  --whitespace-xxs: 1em;
  --whitespace-xs: 2em;
  --whitespace-s: 3em;
  --whitespace-m: 5em;
  --whitespace-l: 10em;
  --whitespace-xl: 20em;

  --step-0: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
  --step-1: clamp(1.2rem, 0.975rem + 1vw, 1.875rem);
  --step-2: clamp(1.44rem, 0.9825rem + 2.0333vw, 2.8125rem);
  --step-3: clamp(1.728rem, 0.8978rem + 3.69vw, 4.2188rem);
  --step-4: clamp(2.0736rem, 0.6554rem + 6.303vw, 6.3281rem);
  --step-5: clamp(2.4883rem, 0.1537rem + 10.3761vw, 9.4922rem);
}

html:has([value="light-theme"]:checked) {
  color-scheme: light;
}

html:has([value="dark-theme"]:checked) {
  color-scheme: dark;
}

body {
  display: grid;
  grid-template-rows: 150px 2fr 150px;
  grid-template-areas:
    "header"
    "main"
    "footer";
  padding: 0;
  margin: 0;
  background-color: var(--background);
}

header {
  grid-area: header;
  height: 100dvh;

  display: grid;
  grid-template-rows: max-content max-content;
  grid-template-areas:
    "nav nav"
    "blauw1 blauw2";
  gap: var(--whitespace-xxs);
  font-family: "Euripides", sans-serif;

  /* MARK: Nav-bar */
  nav {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--background-2);

    grid-area: nav;

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;

      grid-template-areas:
        "tuintje home log"
        "tuintje story contact";

      @media (width > 42.5rem) {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

        grid-template-areas: "tuintje home log story contact";
        align-items: center;
      }
    }

    ul li:nth-of-type(1) {
      grid-area: tuintje;
    }
    ul li:nth-of-type(2) {
      grid-area: home;
    }
    ul li:nth-of-type(3) {
      grid-area: log;
    }
    ul li:nth-of-type(4) {
      grid-area: story;
    }
    ul li:nth-of-type(5) {
      grid-area: contact;
    }

    ul li a {
      display: block;
      color: var(--color);
      padding: 1rem;
      text-decoration: none;
      font-size: var(--step-0);

      &:hover {
        text-decoration: underline;
        transform: scale(1.4);

        /* bron:https://codepen.io/nefejames/pen/qEWBOBz */
        transform-origin: center;
        transition: transform 0.4s ease-out;
        color: #463b88;
      }

      &:active {
        text-shadow: 4px 4px 4px #463b88;
      }

      &:focus-visible {
        outline: 5px solid red;
        outline-offset: 0px;
        background-color: yellow;
        color: red;
      }

      &::selection {
        color: red;
        background-color: yellow;
      }
    }

    ul li a:nth-of-type(1) {
      width: var(--whitespace-m);
    }
  }
}

/* dark/light mode form */
form {
  grid-area: "blauw2";
  grid-column: 2/3;
  color: var(--color);
  justify-self: end;
  padding-right: 2rem;
}

main {
  grid-area: main;
  display: grid;
  padding-top: 5em;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: repeat(4, 100px);
  justify-self: center;

  p {
    font-family: "Euripides", sans-serif;
    color: var(--color);
    font-size: var(--step-0);
  }
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

main > section:first-of-type {
  grid-column: 2/-1;
  grid-row: 2;
}

main > section:nth-of-type(2) {
  grid-column: 3/-1;
  grid-row: 3;

  img {
    max-width: 100px;
    height: auto;
  }
}

main > section:nth-of-type(3) {
  grid-column: 4/-1;
  grid-row: 1;

  img {
    max-width: 100px;
  }
}

footer {
  grid-area: footer;
}